@import '~@styles/variable.scss';

%container {
  // .container {
  box-sizing: border-box;
  width: 420px;
  height: 460px;
  z-index: 10;

  &.forgetPassword {
    height: 520px;

    .el-form {
      width: 295px;

      .el-form-item {
        &.login-btn-ground {
          @include text-align(center);

          .el-form-item__content {
            // clear: both;
            zoom: 1;
            overflow: auto;

            .login-btn {
              width: 120px;
              float: left;
            }

            .cancal-btn {
              float: right;
              width: 120px;
              background-color: $gray-ccc;
              color: $white;
              border-color: $gray-ccc;
            }
          }
        }
      }
    }
  }

  @include padding-tb(65px, 45px);
  @include padding-lr(60px, 60px);
  background-color: $white;

  .admin-name {
    font-size: 22px;
    color: $blue;
    @include text-align(center);
    margin-bottom: 14px;
  }

  .admin-www {
    font-size: 14px;
    color: $gray-900;
    @include text-align(center);
  }

  .margin-top-40 {
    margin-top: 40px;
  }

  .margin-bttom-40 {
    margin-bottom: 40px;
  }

  .login-btn {
    width: 100%;
  }

  .forget-password {
    @include text-align(right);
    color: $gray-900;
    cursor: pointer;
  }

  .send-code.el-form-item {
    .el-form-item__content {
      position: relative;

      .el-input {
        box-sizing: border-box;

        input.el-input__inner {
          padding-right: 40%;
          border: none !important;
        }
      }

      .send-code-btn {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 40%;
        height: calc(100% - 3px);
        cursor: pointer;
        background-color: $white;
        z-index: 999;
      }
    }
  }

  // }
}

.page-login {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  @include flex(center, center);

  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }

  .container {
    @extend %container;
  }
}

.container {
  @extend %container;
}
